<template>
	<view>
		<!-- 加了fixed -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balancea">任务发布(1/2)</text>
				<!-- 右边自定义图片 -->
				<view class="more">
					<text class="jia">?</text>
				</view>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;"></view>
		<view class="main">
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">项目名称<text class="symbol">*</text> </text>
			</view>
			<input class="inputname" type="text" placeholder="请输入项目名字（一般为APP名字，1-10字）" maxlength="10"/>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">任务标题<text class="symbol">*</text> </text>
			</view>
			<input class="inputname" type="text" placeholder="请输入任务标题（5-20字）"/>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">任务链接(选填)<text class="symbol">*</text> </text>
			</view>
			<input class="inputname" type="text" placeholder="请输入任务链接"/>
			<view class="taskSteps">
				<text class="frame"></text>
				<text class="entryName">任务步骤<text class="symbol">*</text> </text>
				<text class="addbz">添加步骤</text>
				<image class="addbzimg" src="../../../static/user2/addbz.png"></image>
			</view>
			<view class="stepsoneBox">
				<text class="stepsFont">步骤一（图文说明 0/1）</text>
				<input class="inputexplain" type="text" placeholder="请输入任务步骤图文说明，图片选填" />
			    <view class="stepsimgBox">
					<sunui-upimg @change="getImageInfo1" :upload_auto="true" ref="upimg1" :upload_count="1"></sunui-upimg>
				</view>
			</view>
			<view v-show="isShow" class="stepsoneBox">
				<text class="stepsFont">步骤二（图文说明 0/1）</text>
				<input class="inputexplain" type="text" placeholder="请输入任务步骤图文说明，图片选填" />
			    <view class="stepsimgBox">
					<sunui-upimg @change="getImageInfo2" :upload_auto="true" ref="upimg1" :upload_count="1"></sunui-upimg>
				</view>
			</view>
			<view v-show="isShowa" class="stepsoneBox">
				<text class="stepsFont">步骤三（图文说明 0/1）</text>
				<input class="inputexplain" type="text" placeholder="请输入任务步骤图文说明，图片选填" />
			    <view class="stepsimgBox">
					<sunui-upimg @change="getImageInfo3" :upload_auto="true" ref="upimg1" :upload_count="1"></sunui-upimg>
				</view>
			</view>
			<view class="entryBox">
				<text class="frame"></text>
				<text class="entryName">数据提交（选填）<text class="symbol">*</text> </text>
			</view>
			<view class="dataSubmissionbox">
				<input class="inputphone" type="text" placeholder="如：提交手机号或用户昵称"/>
				<text class="numjs">(0/30)</text>
			</view>
			<view @click="gotasktwo" class="nextStep">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import sunUiUpimg from '@/components/sunui-upimgb/sunui-upimg.vue';
	export default {
		components: {
			'sunui-upimg': sunUiUpimg
		},
		data() {
			return {
				isShow:false,
				isShowa:false,
			};
		},
		methods:{
			getImageInfo1(e) {
				console.log(e)
			},
			getImageInfo2(e) {
				console.log(e)
			},
			getImageInfo3(e) {
				console.log(e)
			},
			back(){
				uni.navigateBack({
				})
			},
			gotasktwo(){
				uni.navigateTo({
					url:'./taskPublishingb'
				})
				}
		}
	}
</script>

<style lang="scss">
	.balancea{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 26rpx;
		left: 280rpx;
		}
.more {
   	width: 36rpx;
   	height: 36rpx;
   	border: 1rpx solid #333333;
   	border-radius: 20rpx;
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	color: #7322D8;
   	font-weight: bold;
   	position: absolute;
   	right: 65rpx;
   }
   .jia {
   	position: relative;
   	top: -2rpx;
   }
   .main{
	   width: 750rpx;
	   // border: 1rpx solid red;
   }
   .entryBox{
	   width: 710rpx;
	   height: 90rpx;
	   position: relative;
	   left: 20rpx;
	   display: flex;
	   align-items: center;
   }
   .frame{
	   display: block;
	   width:10rpx;
	   height:30rpx;
	   background:rgba(115,34,216,1);
	   border-radius:5rpx;
   }
   .entryName{
	   font-size: 28rpx;
	   color: #333333;
	   position: relative;
	   left: 15rpx;
   }
   .symbol{
	   font-size: 28rpx;
	   color: #7322D8;
   }
   .inputname{
	   width: 690rpx;
	   height: 100rpx;
	   background:rgba(255,255,255,1);
	   border-radius:10rpx;
	   font-size: 28rpx;
	   position: relative;
	   left: 20rpx;
	   padding-left: 20rpx;
   }
   .taskSteps{
	   width: 710rpx;
	   height: 90rpx;
	   display: flex;
	   align-items: center;
	   position: relative;
	   left: 20rpx;
	   }
	   .addbz{
		   font-size:24rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   right: 65rpx;
	   }
	   .addbzimg{
		   width: 30rpx;
		   height: 30rpx;
		   position: absolute;
		   right: 22rpx;
	   }
	   .stepsoneBox{
		   width: 710rpx;
		   height: 364rpx;
		   position: relative;
		   left: 20rpx;
	   }
	   .stepsFont{
		   font-size:28rpx;
		   font-family:PingFang SC;
		   font-weight:bold;
		   color:rgba(51,51,51,1);
		   position: absolute;
		   top: 20rpx;
		   left: 22rpx;
	   }
	   .inputexplain{
		   font-size:26rpx;
		   position: absolute;
		   top: 65rpx;
		   left: 22rpx;
	   }
	   .stepsimgBox{
		   width: 710rpx;
		   height: 250rpx;
		   // border: 1rpx solid red;
		   position: absolute;
		   bottom: 0rpx;
	   }
	   .dataSubmissionbox{
		   width: 710rpx;
		   height: 100rpx;
		   position: relative;
		   left: 20rpx;
		   display: flex;
		   align-items: center;
	   }
	   .inputphone{
		   font-size: 28rpx;
		   position: absolute;
		   left: 21rpx;
	   }
	   .numjs{
		   font-size:24rpx;
		   font-family:PingFang SC;
		   font-weight:400;
		   color:rgba(142,142,142,1);
		   position: absolute;
		   right: 20rpx;
	   }
	   .nextStep{
		   width:710rpx;
		   height:90rpx;
		   background:rgba(115,34,216,1);
		   box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
		   border-radius:20rpx;
		   margin-top: 40rpx;
		   margin-left: 20rpx;
		   margin-bottom: 40rpx;
		   margin-right: 20rpx;
		   font-size:38rpx;
		   font-family:PingFang SC;
		   font-weight:bold;
		   color:rgba(255,255,255,1);
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   }
</style>
